@extends('admin.layout.main')
@section("content")
<form class="layui-form" enctype="multipart/form-data" action="/admin/user" method="post">
    <div class="user_left">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" value="请叫我马哥" name="name"  class="layui-input ">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">真实姓名</label>
            <div class="layui-input-block">
                <input type="text" value="" name="user_name" placeholder="请输入真实姓名" lay-verify="required" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="password" name="password" placeholder="请输入密码"  class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">请务必填写用户名</div>
        </div>
        <div class="layui-form-item" pane="">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block" name="gender">
                <input type="radio" name="gender" value="男" title="男" checked="">
                <input type="radio" name="gender" value="女" title="女">
                <input type="radio" name="gender" value="保密" title="保密">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号码</label>
            <div class="layui-input-block">
                <input type="tel" value="" name="phone" placeholder="请输入手机号码" lay-verify="required|phone" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">企业地址</label>
            <div id="city">
                <div class="layui-input-inline">
                    <select name="prov" class="prov"></select>
                </div>
                <div class="layui-input-inline">
                    <select name="city" class="city" disabled="disabled"></select>
                </div>
                <div class="layui-input-inline">
                    <select name="dist" class="dist" disabled="disabled"></select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">兴趣爱好</label>
            <div class="layui-input-block" >
                <input type="checkbox" value="javascript" name="like1[javascript]" title="Javascript">
                <input type="checkbox" value="html" name="like1[html]" title="HTML(5)">
                <input type="checkbox" value="css" name="like1[css]" title="CSS(3)">
                <input type="checkbox" value="PHP" name="like1[php]" title="PHP">
                <input type="checkbox" value=".net" name="like1[.net]" title=".net">
                <input type="checkbox" value="ASP" name="like1[ASP]" title="ASP">
                <input type="checkbox" value="C#" name="like1[C#]" title="C#">
                <input type="checkbox" value="Angular" name="like1[Angular]" title="Angular">
                <input type="checkbox" value="VUE" name="like1[VUE]" title="VUE">
                <input type="checkbox" value="XML" name="like1[XML]" title="XML">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="text" value="" name="email" placeholder="请输入邮箱" lay-verify="required|email" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">自我评价</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" name="introduction" class="layui-textarea"></textarea>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-upload">
            <button type="button" name="img_upload" class="layui-btn btn_upload_img">
                <i class="layui-icon"></i>上传图片  </button>
            <img class="layui-upload-img img-upload-view" src="">
            <p id="demoText"></p>
        </div>
        <p>
            <input type="hidden" id="img_url" name="image"/>
        </p>
    </div>
    <div class="layui-form-item">
    <input class="layui-upload-file" type="file"  name="file1">
    </div>
    <div class="layui-form-item" style="margin-left: 5%;">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="changeUser">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script src="/js/address.js"></script>
<script type="text/javascript">
    var areaData = address;
    var $form;
    var form;
    var $;
    $(document).ready(function() {
        $("#city").citySelect({
            prov: "陕西",
            city: "西安",
            dist: "新城区",
            nodata: "none"
        });
    });
    layui.use(['element','form','laydate'], function() {
        var table = layui.table, form = layui.form, laydate = layui.laydate;
        $form = $('form');

        loadProvince();

        //加载省数据
        function loadProvince() {
            var proHtml = '';
            for (var i = 0; i < areaData.length; i++) {
                proHtml += '<option value="' + areaData[i].provinceCode + '_' + areaData[i].mallCityList.length + '_' + i + '_' + areaData[i].provinceName + '">' + areaData[i].provinceName + '</option>';
            }
            //初始化省数据
            $form.find('select[name=prov]').append(proHtml);
            form.render();
            form.on('select(prov)', function (data) {
                $form.find('select[name=dist]').html('<option value="">请选择县/区</option>');
                var value = data.value;
                var d = value.split('_');
                var code = d[0];
                var count = d[1];
                var index = d[2];
                if (count > 0) {
                    loadCity(areaData[index].mallCityList);
                } else {
                    $form.find('select[name=city]').attr("disabled", "disabled");
                }
            });
        }

        //加载市数据
        function loadCity(citys) {
            var cityHtml = '<option value="">请选择市</option>';
            for (var i = 0; i < citys.length; i++) {
                cityHtml += '<option value="' + citys[i].cityCode + '_' + citys[i].mallAreaList.length + '_' + i + '_' + citys[i].cityName + '">' + citys[i].cityName + '</option>';
            }
            $form.find('select[name=city]').html(cityHtml).removeAttr("disabled");
            form.render();
            form.on('select(city)', function (data) {
                var value = data.value;
                var d = value.split('_');
                var code = d[0];
                var count = d[1];
                var index = d[2];
                if (count > 0) {
                    loadArea(citys[index].mallAreaList);
                } else {
                    $form.find('select[name=dist]').attr("disabled", "disabled");
                }
            });
        }

        //加载县/区数据
        function loadArea(areas) {
            var areaHtml = '<option value="">请选择县/区</option>';
            for (var i = 0; i < areas.length; i++) {
                areaHtml += '<option value="' + areas[i].areaName + '">' + areas[i].areaName + '</option>';
            }
            $form.find('select[name=dist]').html(areaHtml).removeAttr("disabled");
            form.render();
            form.on('select(dist)', function (data) {
                //console.log(data);
            });
        }
    });
    layui.use('upload', function(){
        var upload = layui.upload;

        //var tag_token = $(".tag_token").val();
        //普通图片上传
        var uploadInst = upload.render({
            elem: '.btn_upload_img'
            ,type : 'images'
            ,exts: 'jpg|png|gif' //设置一些后缀，用于演示前端验证和后端的验证
            //,auto:false //选择图片后是否直接上传
            //,accept:'images' //上传文件类型
            ,url: '/admin/user/upload'
            //,data:{'_token':tag_token}
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){

                    $('.img-upload-view').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //上传成功
                if(res.status == 1){
                    $('#img_url').attr('value', res.message);
                    return layer.msg('上传成功');
                }else{//上传失败
                    layer.msg(res.message);
                }
            }
            ,error: function(){
                //演示失败状态，并实现重传
                return layer.msg('上传失败,请重新上传');
            }
        });
    });
</script>
@endsection
